<template>
    <div class="layout">
        <div class="top-nav">
            <img class="logo" src="~@/assets/logo.png" >
            <Menu class="top-nav-menu" mode="horizontal" theme="dark" active-name="1">
                <MenuItem name="1">
                    <Icon type="ios-paper" />
                    文章管理
                </MenuItem>
                <MenuItem name="2">
                    <Icon type="ios-paper" />
                    栏目管理
                </MenuItem>
            </Menu>

            <Dropdown class="top-nav-user" trigger="click" placement="bottom-end">
                <a href="javascript:void(0)">
                    Admin
                    <Icon type="ios-arrow-down"></Icon>
                </a>
                <DropdownMenu slot="list">
                    <DropdownItem>个人信息</DropdownItem>
                    <DropdownItem divided>平台管理</DropdownItem>
                    <DropdownItem>CMS管理</DropdownItem>
                    <DropdownItem divided>注销</DropdownItem>
                    <DropdownItem>退出</DropdownItem>
                </DropdownMenu>
            </Dropdown>
        </div>
        <div class="sider-nav">
            <Menu theme="dark" accordion>
                <Submenu name="1">
                    <template slot="title">
                        <Icon type="ios-paper" />
                        内容管理
                    </template>
                    <MenuItem name="1-1">文章管理</MenuItem>
                    <MenuItem name="1-2">评论管理</MenuItem>
                    <MenuItem name="1-3">举报管理</MenuItem>
                </Submenu>
                <Submenu name="2">
                    <template slot="title">
                        <Icon type="ios-people" />
                        用户管理
                    </template>
                    <MenuItem name="2-1">新增用户</MenuItem>
                    <MenuItem name="2-2">活跃用户</MenuItem>
                </Submenu>
                <Submenu name="3">
                    <template slot="title">
                        <Icon type="ios-stats" />
                        统计分析
                    </template>
                    <MenuGroup title="使用">
                        <MenuItem name="3-1">新增和启动</MenuItem>
                        <MenuItem name="3-2">活跃分析</MenuItem>
                        <MenuItem name="3-3">时段分析</MenuItem>
                    </MenuGroup>
                    <MenuGroup title="留存">
                        <MenuItem name="3-4">用户留存</MenuItem>
                        <MenuItem name="3-5">流失用户</MenuItem>
                    </MenuGroup>
                </Submenu>
            </Menu>
        </div>
        <div class="content">
            <div class="img-news">
                <Carousel autoplay loop arrow="always">
                    <CarouselItem>
                        <div class="demo-carousel">1</div>
                    </CarouselItem>
                    <CarouselItem>
                        <div class="demo-carousel">2</div>
                    </CarouselItem>
                    <CarouselItem>
                        <div class="demo-carousel">3</div>
                    </CarouselItem>
                </Carousel>
            </div>
            <div class="version-description">

            </div>
        </div>
    </div>
</template>
<script>
    export default {

    }
</script>
<style scoped>
.layout {
    position: relative;
}
.top-nav {
    height: 60px;
    border-bottom: 1px solid #cccccc;
    background-color: #0d1827;
}
.top-nav .ivu-menu-item-selected {
    height: 59px;
    border-bottom: 3px solid #00aeff;
}
.logo {
    position: absolute;
    top: 10px;
    width: 240px;
    height: 40px;
}
.top-nav-menu {
    position: absolute;
    left: 242px;
    height: 59px;
}

.top-nav-user {
    position: absolute;
    right: 15px;
    height: 59px;
}

.top-nav-user a {
    line-height: 58px;
    color: #fff;
    font-size: 14px;
}

.sider-nav {
    position: fixed;
    width: 242px;
    height: 100%;
    background-color: #0d1827;
}

.content {
    position: fixed;
    left: 242px;
    width: 100%;
    height: 100%;
    background-color: #010b1b;

}

.img-news {
    position: relative;
    top: 150px;
    left: 50px;
    width: 500px;
    float: left;
}

.demo-carousel {
    background-color: #1d2126;
    width: 500px;
    height: 300px;
    text-align: center;
}

.version-description {
    position: relative;
    top: 150px;
    left: 600px;
    background-color: #1d2126;
    width: 300px;
    height: 300px;
}


/*
    样式重写
*/
.ivu-menu-dark {
    background-color: #0d1827;
}
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-opened {
    border-left: 3px solid #00aeff;
}

</style>

